<template>
    <view class="login-container">
      <!-- 检查登录状态中的加载提示 -->
      <view v-if="isCheckingStatus" class="checking-container">
        <view class="loading-spinner"></view>
        <text class="loading-text">正在检查登录状态...</text>
      </view>
      
      <!-- 登录/注册表单 - 只在检查完成后显示 -->
      <view class="card-container" v-else>
        <!-- 顶部登录标题区 -->
        <view class="title-area" v-if="isLoginMode">
          <!-- <image class="logo-image" src="/static/modio平台.png" mode="aspectFit"></image> -->
          <view class="title-line"></view>
        </view>
  
          <!-- 顶部注册标题区 -->
        <view class="title-area" v-else>
          <text class="brand-text">
            <text class="brand-text-normal">创建新账户</text>
          </text>
          <view class="title-line"></view>
        </view>
  
        <!-- <view v-if="platform === 'app'"> -->
        <view >
        <!-- 登录表单 -->
        <view class="form-container" v-if="isLoginMode">
          <!-- 登录方式切换 -->
          <view class="login-tabs">
            <view 
              class="login-tab" 
              :class="{'active': loginType === 'username'}"
              @tap="switchLoginType('username')"
            >
              <text>账号登录</text>
            </view>
            <view 
              class="login-tab" 
              :class="{'active': loginType === 'sms'}"
              @tap="switchLoginType('sms')"
            >
              <text>短信登录</text>
            </view>
          </view>

          <!-- 账号登录表单 -->
          <view v-if="loginType === 'username'">
            <view class="input-item" :class="{'error': errors.username}">
              <text class="icon">👤</text>
              <input 
                type="text" 
                placeholder="用户名 / 邮箱" 
                placeholder-style="color: #999; font-size: 28rpx;"
                v-model="form.username"
                @blur="validateUsername"
              />
            </view>
            <text v-if="errors.username" class="error-text">{{ errors.username }}</text>

            <view class="input-item" :class="{'error': errors.password}">
              <text class="icon">🔒</text>
              <input 
                type="password" 
                placeholder="密码" 
                placeholder-style="color: #999; font-size: 28rpx;"
                v-model="form.password"
                @blur="validatePassword"
              />
            </view>
            <text v-if="errors.password" class="error-text">{{ errors.password }}</text>
          </view>

          <!-- 短信登录表单 -->
          <view v-if="loginType === 'sms'">
            <view class="input-item" :class="{'error': errors.phone}">
              <text class="icon">📱</text>
              <input 
                type="text" 
                placeholder="请输入手机号" 
                placeholder-style="color: #999; font-size: 28rpx;"
                v-model="form.phone"
                @input="onPhoneInput"
                @blur="validatePhone"
                maxlength="11"
              />
            </view>
            <text v-if="errors.phone" class="error-text">{{ errors.phone }}</text>

            <view class="input-item sms-code-item" :class="{'error': errors.smsCode && form.smsCode.length > 0}">
              <text class="icon">📨</text>
              <input 
                type="text" 
                placeholder="请输入4位验证码" 
                placeholder-style="color: #999; font-size: 28rpx;"
                v-model="form.smsCode"
                @blur="validateSmsCode"
                maxlength="4"
              />
              <button 
                class="sms-button" 
                :class="{
                  'disabled': !canSendSms || smsCountdown > 0,
                  'sending': isSendingSms
                }"
                @tap="sendSmsCode"
                :disabled="!canSendSms || smsCountdown > 0 || isSendingSms"
              >
                <text v-if="isSendingSms">发送中</text>
                <text v-else-if="smsCountdown > 0">{{ smsCountdown }}s</text>
                <text v-else>获取验证码</text>
              </button>
            </view>
            <text v-if="errors.smsCode && form.smsCode.length > 0" class="error-text">{{ errors.smsCode }}</text>
          </view>
  
          <view class="options-row">
            <view class="checkbox-item">
            </view>
            <text class="forget-password" @tap="handleForgetPassword">忘记密码</text>
          </view>
  
          <button class="action-button" @tap="handleLogin">
            {{ loginType === 'sms' ? '短信登录' : '登录' }}
          </button>
  
          <!-- <view class="switch-link">
            <text class="switch-text">您还没有账户？</text>
            <text class="switch-action" @tap="toggleMode">去注册</text>
          </view> -->
        </view>
  
        <!-- 注册表单 -->
        <view class="form-container" v-else>
  
          <view class="input-item" :class="{'error': errors.username}">
            <text class="icon">👤</text>
            <input 
              type="text" 
              placeholder="用户名 / 邮箱" 
              placeholder-style="color: #999; font-size: 28rpx;"
              v-model="form.username"
              @blur="validateUsername"
            />
          </view>
          <text v-if="errors.username" class="error-text">{{ errors.username }}</text>
  
          <!-- <view class="input-item" :class="{'error': errors.phone}">
            <text class="icon">📱</text>
            <input 
              type="text" 
              placeholder="手机号" 
              placeholder-style="color: #999; font-size: 28rpx;"
              v-model="form.phone"
              @blur="validatePhone"
            />
          </view> -->
          <text v-if="errors.phone" class="error-text">{{ errors.phone }}</text>
  
          <view class="input-item" :class="{'error': errors.password}">
            <text class="icon">🔒</text>
            <input 
              type="password" 
              placeholder="密码（至少6位，包含字母和数字）" 
              placeholder-style="color: #999; font-size: 28rpx;"
              v-model="form.password"
              @blur="validatePassword"
            />
          </view>
          <text v-if="errors.password" class="error-text">{{ errors.password }}</text>
  
          <!-- <view class="input-item" :class="{'error': errors.confirmPassword}">
            <text class="icon">🔑</text>
            <input 
              type="password" 
              placeholder="确认密码" 
              placeholder-style="color: #999; font-size: 28rpx;"
              v-model="form.confirmPassword"
              @blur="validateConfirmPassword"
            />
          </view> -->
          <text v-if="errors.confirmPassword" class="error-text">{{ errors.confirmPassword }}</text>
  
          <view class="agreement-row">
            <checkbox 
              :checked="agreed" 
              @tap="handleAgreementChange"
              color="#FF6B9B" 
            />
            <text class="agreement-text">
              我已阅读并接受
              <text class="agreement-link" @tap="openUserAgreement">用户协议</text>
              和
              <text class="agreement-link" @tap="openPrivacyPolicy">隐私政策</text>
            </text>
          </view>
  
          <button class="action-button" @tap="handleRegister">注册</button>
  
          <view class="switch-link">
            <text class="switch-text">已经有账号？</text>
            <text class="switch-action" @tap="toggleMode">去登陆</text>
          </view>
        </view>
  
        </view>
  
        <!-- 微信登录 -->
        <!-- <view v-if="platform === 'mp-weixin'">
        
          <button class="action-button" @tap="wxlogin">微信授权登录</button>
  
        </view> -->
  
    
  
      </view>
    </view>
    
    <!-- 登录/注册加载弹窗 -->
    <view class="loading-mask" v-if="isLoading">
      <view class="loading-container">
        <view class="loading-spinner"></view>
        <text class="loading-text">{{loadingText}}</text>
      </view>
    </view>
  </template>
  
  <script setup>
import { ref, reactive, onUnmounted } from 'vue'
import http from '../../utils/request'
import { useUserStore } from '../../store/user'
import { onLoad } from '@dcloudio/uni-app'
import { getDeviceId } from '../../utils/device'
  
  // 初始化用户store
  const userStore = useUserStore()
  
// 响应式数据
const isLoginMode = ref(true)
const loginType = ref('username') // 'username' | 'sms'
const form = reactive({
  username: '',
  password: '',
  phone: '',
  smsCode: '',
  confirmPassword: ''
})
const errors = reactive({
  username: '',
  password: '',
  phone: '',
  smsCode: '',
  confirmPassword: ''
})

// 短信验证码相关
const smsCountdown = ref(0) // 倒计时秒数
const isSendingSms = ref(false) // 是否正在发送短信
const canSendSms = ref(false) // 是否可以发送短信
const smsTimer = ref(null) // 倒计时定时器
const lastSendTime = ref(0) // 上次发送时间，用于节流

  
const isCheckingStatus = ref(true) // 新增：检查登录状态中的标记
  
  // 平台
  const platform = ref('')
  
  // 记住我
  const rememberMe = ref(false)
  
  // 同意应用协议
  const agreed = ref(false)
  
  // 加载状态
  const isLoading = ref(false)
  const loadingText = ref('登录中...')

  
  const onChooseAvatar = (e) => {
    const { avatarUrl } = e.detail 
    console.log('头像选择成功:', avatarUrl)
    avatarUrl.value = avatarUrl
  }

  const getIsCode = async (isValidated, warehouseCode) => {
  try {
    console.log('传入参数',{
      userRowid: isValidated.rowid,
      warehouseCode: warehouseCode
    });
    
    const res = await http.post('https://www.dachen.vip/api/workflow/hooks2/NjhkNjcxZDZjYTg2ZGM5N2VlYzhlMzFl', {
      userRowid: isValidated.rowid,
      warehouseCode: warehouseCode
    })
    console.log('验证结果:', res)
    // 检查响应数据
    if (res.code == 1) {
     const userInfo = await http.post('https://www.dachen.vip/api/workflow/hooks2/NjhlYTMwYjlkNDAyMjg1NzA2YzkxMjFl', {
      userRowid: isValidated.rowid
     })
     console.log('callWorkflowAPIuserInfo', JSON.parse(userInfo.data));
     console.log('用户信息', userStore.getUserInfo());
     userStore.setUserInfo(JSON.parse(userInfo.data))
      return true
    } else {
      return false
    }
  } catch (error) {
    console.error('验证请求失败:', error)
    throw error
  }
}

// 页面加载时检查是否已验证
const checkValidationStatus =  async () => {
  // 首先尝试获取新的存储key
  let isValidated = uni.getStorageSync('cdx_merchant_userInfo')
  
  console.log('isValidated', isValidated);
  
  if (isValidated) {
      userStore.setUserInfo(isValidated)

    console.log('userStore', userStore.getUserInfo());
      console.log('用户退出前选择的仓库编码', userStore.getUserInfo()['68d5efc3b02e7bd374f192a3']);
    
    // 获取用户退出前选择的仓库编码
    const warehouseCode = userStore.getUserInfo()['68d5efc3b02e7bd374f192a3'];

    // 检查仓库编码是否有效
    const isValid = await getIsCode(isValidated,warehouseCode)
    console.log('isValid', isValid);
    if(isValid) {

      uni.redirectTo({
        url: `/pages/tabs/warehouse/warehouse?code=${warehouseCode}`
      })
    } else {
      // 验证失败，显示页面内容
      isCheckingStatus.value = false
    }
  } else {
    // 没有登录信息，显示页面内容
    isCheckingStatus.value = false
  }
}
  
// 页面加载时执行
onLoad(async () => {
  await checkValidationStatus()
})
  
  
  // 方法定义
  const toggleMode = () => {
    isLoginMode.value = !isLoginMode.value
    clearForm()
  }
  
  const clearForm = () => {
    form.username = ''
    form.password = ''
    form.phone = ''
    form.smsCode = ''
    form.confirmPassword = ''
    errors.username = ''
    errors.password = ''
    errors.phone = ''
    errors.smsCode = ''
    errors.confirmPassword = ''
    // 清除短信相关状态
    clearSmsState()
  }

  // 清除短信状态
  const clearSmsState = () => {
    smsCountdown.value = 0
    isSendingSms.value = false
    canSendSms.value = false
    if (smsTimer.value) {
      clearInterval(smsTimer.value)
      smsTimer.value = null
    }
  }

  // 切换登录方式
  const switchLoginType = (type) => {
    loginType.value = type
    clearForm()
  }
  
  const validateUsername = () => {
    if (!form.username.trim()) {
      errors.username = '请输入用户名'
      return false
    }
    errors.username = ''
    return true
  }
  
  const validatePassword = () => {
    if (!form.password.trim()) {
      errors.password = '请输入密码'
      return false
    }
    
    // 注册模式下需要验证密码强度
    if (!isLoginMode.value) {
      const password = form.password.trim()
      
      // 检查密码长度
      if (password.length < 6) {
        errors.password = '密码不能少于6位'
        return false
      }
      
      // 检查是否包含字母
      const hasLetter = /[a-zA-Z]/.test(password)
      // 检查是否包含数字
      const hasNumber = /\d/.test(password)
      
      if (!hasLetter || !hasNumber) {
        errors.password = '密码必须包含字母和数字'
        return false
      }
    }
    
    errors.password = ''
    return true
  }
  
  // 手机号输入时实时校验
  const onPhoneInput = () => {
    const phone = form.phone.trim()
    
    // 清除之前的错误信息
    errors.phone = ''
    
    // 如果为空，不能发送验证码
    if (!phone) {
      canSendSms.value = false
      return
    }
    
    // 验证手机号格式
    const phoneRegex = /^1[3-9]\d{9}$/
    if (phoneRegex.test(phone)) {
      // 手机号格式正确，允许发送验证码
      canSendSms.value = true
      errors.phone = ''
    } else {
      // 手机号格式不正确，不允许发送验证码
      canSendSms.value = false
      // 输入过程中不显示错误提示，失焦时再显示
    }
  }

  const validatePhone = () => {
    if (!form.phone.trim()) {
      errors.phone = '请输入手机号'
      canSendSms.value = false
      return false
    }
    
    // 验证手机号格式
    const phoneRegex = /^1[3-9]\d{9}$/
    if (!phoneRegex.test(form.phone.trim())) {
      errors.phone = '请输入正确的手机号格式'
      canSendSms.value = false
      return false
    }
    
    errors.phone = ''
    canSendSms.value = true
    return true
  }

  // 验证短信验证码
  const validateSmsCode = () => {
    // 如果没有输入，不显示错误
    if (!form.smsCode.trim()) {
      errors.smsCode = '请输入验证码'
      return false
    }
    
    // 验证验证码格式（4位数字）
    const codeRegex = /^\d{4}$/
    if (!codeRegex.test(form.smsCode.trim())) {
      errors.smsCode = '请输入4位数字验证码'
      return false
    }
    
    errors.smsCode = ''
    return true
  }
  
  const validateConfirmPassword = () => {
    if (!form.confirmPassword.trim()) {
      errors.confirmPassword = '请输入确认密码'
      return false
    }
    if (form.confirmPassword !== form.password) {
      errors.confirmPassword = '两次密码不一致'
      return false
    }
    errors.confirmPassword = ''
    return true
  }
  
  // 发送短信验证码
  const sendSmsCode = async () => {
    // 验证手机号
    if (!validatePhone()) {
      return
    }

    // 节流检查 - 60秒内只能发送一次
    const now = Date.now()
    const timeDiff = now - lastSendTime.value
    const throttleTime = 60 * 1000 // 60秒

    if (timeDiff < throttleTime) {
      const remainTime = Math.ceil((throttleTime - timeDiff) / 1000)
      uni.showToast({
        title: `请等待${remainTime}秒后再试`,
        icon: 'none'
      })
      return
    }

    // 检查是否在倒计时中
    if (smsCountdown.value > 0) {
      uni.showToast({
        title: `请等待${smsCountdown.value}秒后再试`,
        icon: 'none'
      })
      return
    }

    // 设置发送状态
    isSendingSms.value = true

    try {
      // 模拟发送短信API调用
      // TODO: 替换为实际的短信API
      const smsData = {
        phone: form.phone.trim(),
        type: '供应商' // 登录类型
      }

      // 这里应该调用实际的短信发送API
      const res = await http.post('https://www.dachen.vip/api/workflow/hooks/NjhlZGVkYjczNzBkOTMxYWU3ZGJhYTg0', smsData)
      console.log('发送短信响应:', res);
      
   
      
      // 假设发送成功
      const sendSuccess = true // 实际应该根据API响应判断
      
      if (sendSuccess) {
        // 发送成功，开始倒计时
        uni.showToast({
          title: '验证码已发送',
          icon: 'success'
        })
        
        lastSendTime.value = now
        startCountdown()
        
      } else {
        throw new Error('发送失败')
      }

    } catch (error) {
      console.error('发送短信验证码失败:', error)
      uni.showToast({
        title: error.message || '发送失败，请稍后重试',
        icon: 'none'
      })
    } finally {
      isSendingSms.value = false
    }
  }

  // 开始倒计时
  const startCountdown = () => {
    smsCountdown.value = 60 // 60秒倒计时
    
    smsTimer.value = setInterval(() => {
      smsCountdown.value--
      
      if (smsCountdown.value <= 0) {
        clearInterval(smsTimer.value)
        smsTimer.value = null
      }
    }, 1000)
  }

  const handleLogin = async () => {
    // 根据登录类型进行不同的验证
    if (loginType.value === 'username') {
      if (!validateUsername() || !validatePassword()) {
        return
      }
    } else if (loginType.value === 'sms') {
      if (!validatePhone() || !validateSmsCode()) {
        return
      }
    }
    
    // 设置加载状态
    isLoading.value = true
    loadingText.value = '登录中...'
    
    try {
      // 获取设备ID（兼容处理）
      let deviceId = ''
      try {
        deviceId = await getDeviceId()
      } catch (error) {
        console.error('获取设备ID失败:', error)
        // 如果获取失败，使用备用设备ID
        deviceId = 'backup_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9)
      }
      
      let res
      
      if (loginType.value === 'username') {
        // 账号密码登录
        const loginData = {
          username: form.username,
          password: form.password,
          deviceId: deviceId
        }
        res = await http.post('https://www.dachen.vip/api/workflow/hooks/NjhjM2FiYWVlN2Q5ZjkwYmMwZWE2ZGU1', loginData)
      
      
      } else if (loginType.value === 'sms') {
        // 短信验证码登录
        const smsLoginData = {
          phone: form.phone.trim(),
          code: form.smsCode.trim(),
          deviceId: deviceId,
          type: '供应商'
        }
        
        console.log('短信登录数据:', smsLoginData)
        
        // 调用短信登录API
        res = await http.post('https://www.dachen.vip/api/workflow/hooks/NjhlZGY5NWMzNzBkOTMxYWU3ZGMyZTI2', smsLoginData)
        if(!res){
          isLoading.value = false
          uni.showToast({
        title: '验证码错误！请稍后重试',
        icon: 'none',
        duration: 2000
      })
          return
        }
        
        console.log('短信登录响应:', res)
      }

      console.log('登录响应原始数据:', res)
      
      // 首先检查响应是否存在
      if (!res || !res.data) {
        isLoading.value = false
        console.log('登录失败：响应数据为空')
        uni.showToast({
          title: '登录失败，服务器无响应',
          icon: 'none'
        })
        return
      }
      
      // 安全地解析并打印数据
      let parsedData
      try {
        parsedData = typeof res.data === 'string' ? JSON.parse(res.data) : res.data
        console.log('解析后的登录数据:', parsedData)
      } catch (parseError) {
        isLoading.value = false
        console.error('解析响应数据失败:', parseError)
        uni.showToast({
          title: '登录响应格式错误',
          icon: 'none'
        })
        return
      }
      
      // 检查是否是无效的用户标识
      if (parsedData['68c389ce270095f8f3d4464e'] == '87b98eab-90d4-41d7-897d-12ba06b9df2d') {
        isLoading.value = false
        console.log('登录失败：响应数据异常')
        uni.showToast({
          title: '您输入的账号或密码异常！',
          icon: 'none'
        })
        return
      }
      
      // 使用已解析的数据
      let responseData = parsedData
   
      // 检查用户类型
      if (responseData['68c38813270095f8f3d44611'] !== '0d4aaef8-d448-47c0-8e29-b4c2172bd236') {
        isLoading.value = false
        console.log('用户类型检查失败，当前用户类型:', responseData['68c38813270095f8f3d44611'])
        uni.showToast({
          title: '您输入的账号或密码异常！',
          icon: 'none'
        })
        return
      }else if(responseData['68edb7e4af714d8fcc989def'] == '' || responseData['68edb7e4af714d8fcc989def'] == null){
        isLoading.value = false
        console.log('您的账户暂未绑定仓库，请联系管理人员到后台为您绑定!')
      uni.showToast({
        title: '您的账户暂未绑定仓库，请联系管理人员到后台为您绑定',
        icon: 'none'
      })
      return
      }

      if(responseData['68ec94b45012cca56ee71361'] == 1){
        console.log('用户首次登录!')
        isLoading.value = false
        
        // 跳转到修改密码页面
        uni.redirectTo({
          url: `/pages/login/changePassword?username=${encodeURIComponent(form.username)}&userInfo=${encodeURIComponent(JSON.stringify(responseData))}`
        })
        return
      }
      
      // 登录成功
      console.log('登录成功')
      isLoading.value = false
      
      // 存储用户信息
      uni.setStorageSync('cdx_merchant_userInfo', res.data)
      userStore.setUserInfo(responseData)
      
      console.log('userStore', userStore.getUserInfo())
      
      // 显示成功提示并跳转
      uni.showToast({
        title: '登录成功',
        icon: 'success',
        duration: 1500
      })
      
      // 延迟跳转，让用户看到成功提示
      setTimeout(() => {
        uni.reLaunch({
          url: '/pages/tabs/index'
        })
      }, 1500)
      
    } catch (error) {
      // 捕获所有未处理的异常
      isLoading.value = false
      console.error('登录过程发生错误:', error)
      uni.showToast({
        title: '登录失败，请检查网络连接或稍后重试',
        icon: 'none',
        duration: 2000
      })
    }
  }
  // 注册
  const handleRegister = async () => {
    
    if (!validateUsername() || !validatePassword() ) {
      return
    }
    
    // 确保agreed是布尔值，处理可能的字符串值
    const isAgreed = Boolean(agreed.value) && agreed.value !== 'false'
    
    if (!isAgreed) {
      uni.showToast({
        title: '请同意用户协议和隐私政策',
        icon: 'none'
      })
      return
    }
    
    // 设置加载状态
    isLoading.value = true
    loadingText.value = '注册中...'
    
    try {
      // 获取设备ID（兼容处理）
      let deviceId = ''
      try {
        deviceId = await getDeviceId()
      } catch (error) {
        console.error('获取设备ID失败:', error)
        // 如果获取失败，使用备用设备ID
        deviceId = 'backup_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9)
      }
      
      const registerData = {
        ...form,
        deviceId: deviceId
      }

      const res = await http.post('https://www.dachen.vip/api/workflow/hooks2/NjhkODk3OWRmOWNiODIyZjUyNDdkM2Ez', registerData)

      console.log('注册响应:', res)
   
      if (!res) {
        isLoading.value = false
        console.log('该用户名已被注册，请重新输入用户名')
        uni.showToast({
          title: '该用户名已被注册!',
          icon: 'none'
        })
        
      } else {
        console.log('该用户名未被注册，可以注册');
        // 关闭加载状态
        isLoading.value = false
        // 延迟跳转，让用户看到成功提示
        uni.showToast({
          title: '注册成功，等待审批中',
          icon: 'none'
        })
        return
      }
      
    } catch (error) {
      // 捕获所有未处理的异常
      isLoading.value = false
      console.error('注册过程发生错误:', error)
      uni.showToast({
        title: '注册失败，请检查网络连接或稍后重试',
        icon: 'none',
        duration: 2000
      })
    }
  }
  
  const handleForgetPassword = () => {
    uni.showToast({
      title: '请联系管理员获取',
      icon: 'none'
    })
  }
  
  const openUserAgreement = () => {
    uni.showToast({
      title: '用户协议功能开发中',
      icon: 'none'
    })
  }
  
  const openPrivacyPolicy = () => {
    uni.showToast({
      title: '隐私政策功能开发中',
      icon: 'none'
    })
  }
  
  const handleAgreementChange = () => {
    console.log('agreed:', agreed.value);
    agreed.value = !agreed.value
    console.log('Updated agreed value:', agreed.value)
  }
  
  const handleRememberMeChange = () => {
    rememberMe.value = !rememberMe.value
    console.log('记住我状态:', rememberMe.value)
  }

// 页面销毁时清理定时器
onUnmounted(() => {
  clearSmsState()
})
  </script>
  
  <style scoped>
    .login-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      background: linear-gradient(135deg, #E8D5FF 0%, #FFB6C1 100%);
      padding: 0 32rpx;
    }

    /* 检查登录状态容器样式 */
    .checking-container {
      background: #FFFFFF;
      border-radius: 24rpx;
      padding: 64rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
    }
  
    .card-container {
      width: 85%;
      max-width: 600rpx;
      background: #FFFFFF;
      border-radius: 24rpx;
      box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.1);
      padding: 48rpx 32rpx;
      margin: 48rpx 0;
    }
  
    .title-area {
      text-align: center;
      margin-bottom: 48rpx;
    }
  
    .logo-image {
      width: 300rpx;
      height: 120rpx;
      margin: 0 auto 16rpx;
      display: block;
    }
  
    .welcome-text {
      font-size: 32rpx;
      color: #666666;
      display: block;
      margin-bottom: 16rpx;
    }
  
    .brand-text {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 48rpx;
      font-weight: bold;
      margin-bottom: 16rpx;
    }
  
    .brand-name {
      color: #000000;
    }
  
    .brand-o {
      color: #FF6B9B;
      position: relative;
      display: inline-block;
      width: 48rpx;
      height: 48rpx;
      background: #FF6B9B;
      border-radius: 50%;
      color: #FFFFFF;
      text-align: center;
      line-height: 48rpx;
      margin: 0 4rpx;
    }
  
    .brand-o::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 8rpx;
      height: 8rpx;
      background: #FFFFFF;
      border-radius: 50%;
    }
  
    .brand-text-normal {
      color: #666666;
      font-size: 32rpx;
      margin-left: 8rpx;
    }
  
    .title-line {
      width: 64rpx;
      height: 4rpx;
      background: #FF6B9B;
      margin: 8rpx auto 0;
      border-radius: 2rpx;
    }
  
    .register-title {
      font-size: 36rpx;
      color: #333333;
      font-weight: 500;
      margin-bottom: 32rpx;
    }
  
    .form-container {
      width: 100%;
    }
  
    .input-item {
      display: flex;
      align-items: center;
      background: #FFFFFF;
      border: 2rpx solid #E0E0E0;
      border-radius: 16rpx;
      padding: 0 24rpx;
      height: 104rpx;
      margin-bottom: 8rpx;
      transition: all 0.3s ease;
    }
  
    .input-item.error {
      border-color: #FF4D4F;
      border-width: 3rpx;
    }
  
    .icon {
      width: 40rpx;
      height: 40rpx;
      margin-right: 20rpx;
      opacity: 0.6;
    }
  
    input {
      flex: 1;
      font-size: 28rpx;
      color: #333333;
      height: 100%;
      border: none;
      outline: none;
    }
  
    .error-text {
      color: #FF4D4F;
      font-size: 24rpx;
      margin: 8rpx 0 16rpx 24rpx;
      display: block;
    }
  
    .options-row, .agreement-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 32rpx 0;
      font-size: 24rpx;
    }
  
    .checkbox-item {
      display: flex;
      align-items: center;
    }
  
    .checkbox-text {
      color: #666666;
      margin-left: 8rpx;
    }
  
    .forget-password {
      color: #1890FF;
      font-size: 24rpx;
    }
  
    .agreement-row {
      justify-content: flex-start;
      flex-wrap: wrap;
    }
  
    .agreement-text {
      color: #666666;
      font-size: 24rpx;
      margin-left: 8rpx;
      flex: 1;
    }
  
    .agreement-link {
      color: #1890FF;
      text-decoration: none;
    }
  
    .action-button {
      width: 100%;
      height: 96rpx;
      background: #FF6B9B;
      border: none;
      border-radius: 24rpx;
      color: #FFFFFF;
      font-size: 32rpx;
      font-weight: bold;
      margin: 32rpx 0;
      box-shadow: 0 4rpx 8rpx rgba(255, 107, 155, 0.3);
      transition: all 0.3s ease;
    }
  
    .action-button:active {
      transform: translateY(2rpx);
      box-shadow: 0 2rpx 4rpx rgba(255, 107, 155, 0.3);
    }
  
    .switch-link {
      text-align: center;
      margin-top: 32rpx;
    }
  
    .switch-text {
      color: #666666;
      font-size: 28rpx;
    }
  
    .switch-action {
      color: #FF6B9B;
      font-size: 28rpx;
      margin-left: 8rpx;
      font-weight: bold;
    }
  
    /* 加载弹窗样式 */
    .loading-mask {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 9999;
    }
  
    .loading-container {
      background: #FFFFFF;
      border-radius: 24rpx;
      padding: 48rpx 64rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.2);
    }
  
    .loading-spinner {
      width: 64rpx;
      height: 64rpx;
      border: 6rpx solid #F0F0F0;
      border-top: 6rpx solid #FF6B9B;
      border-radius: 50%;
      animation: spin 1s linear infinite;
      margin-bottom: 24rpx;
    }
  
    .loading-text {
      font-size: 28rpx;
      color: #333333;
      font-weight: 500;
    }
  
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    /* 登录方式切换标签样式 */
    .login-tabs {
      display: flex;
      background: #F5F5F5;
      border-radius: 12rpx;
      margin-bottom: 32rpx;
      padding: 8rpx;
    }

    .login-tab {
      flex: 1;
      text-align: center;
      padding: 16rpx 0;
      border-radius: 8rpx;
      font-size: 28rpx;
      color: #666666;
      transition: all 0.3s ease;
      cursor: pointer;
    }

    .login-tab.active {
      background: #FFFFFF;
      color: #FF6B9B;
      font-weight: bold;
      box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
    }

    /* 短信验证码输入框样式 */
    .sms-code-item {
      display: flex;
      align-items: center;
      position: relative;
    }

    .sms-button {
      position: absolute;
      right: 16rpx;
      top: 50%;
      transform: translateY(-50%);
      background: #FF6B9B;
      color: #FFFFFF;
      border: none;
      border-radius: 8rpx;
      padding: 12rpx 16rpx;
      font-size: 24rpx;
      min-width: 120rpx;
      height: 56rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
    }

    .sms-button.disabled {
      background: #CCCCCC;
      color: #999999;
      cursor: not-allowed;
    }

    .sms-button.sending {
      background: #FFB6C1;
      color: #666666;
    }

    .sms-button:active:not(.disabled) {
      background: #FF4D80;
      transform: translateY(-50%) scale(0.95);
    }

    /* 为短信验证码输入框留出右侧空间 */
    .sms-code-item input {
      padding-right: 140rpx;
    }
  
  
    .user-details {
      display: flex;
      flex-direction: column;
    }
  
    .user-nickname {
      font-size: 32rpx;
      font-weight: bold;
      color: #333333;
      margin-bottom: 4rpx;
    }
  
    .user-desc {
      font-size: 24rpx;
      color: #999999;
    }
  </style>